<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="../../resources/app/css/index.css">
  <link rel="stylesheet" href="../../resources/app/css/fonts/opensans/style.css">
  <link rel="stylesheet" href="components/breadcrumb/breadcrumb.css">
  <link rel="stylesheet" href="components/card/card.css">
  <link rel="stylesheet" href="components/files/files.css">
  <link rel="stylesheet" href="components/folder/folder.css">

</head>
<body class="standardText">
<div class="dialogWrapper save">
  <div class="header">
    <div class="headerTop">
      <div class="headerTitle headerText">
        Open
      </div>
      <div class="headerSearch">
        <div class="headerSearchLeft"></div>
        <input type="text" class="searchBox" placeholder="Search Myfolder"/>
        <div class="headerSearchRight"></div>
      </div>
    </div>
    <div class="headerBottom">
      <div class="breadcrumb blueText">
        <!-- REPEATABLE class="breadcrumbItem" -->
        <div class="breadcrumbItem">
          <div class="breadcrumbFolder">Home</div>
          <div class="breadcrumbNext"></div>
        </div>
        <div class="breadcrumbItem">
          <div class="breadcrumbFolder">MyFolder</div>
          <div class="breadcrumbNext last"></div>
        </div>
      </div>
      <div class="addDelete">
        <div class="addFolder"></div>
        <div class="deleteFolder"></div>
      </div>
    </div>
  </div>
  <div class="middle">

    <div class="directoryTreeArea">


      <div class="folder recents empty">
        <div class="folderArrowWrapper">
          <div class="folderArrow"></div>
        </div>
        <div class="folderImage"></div>
        <div class="folderName">Recents</div>
      </div>
      <div class="folderectories">
        <div class="folder home opened selected">
          <div class="folderArrowWrapper">
            <div class="folderArrow"></div>
          </div>
          <div class="folderImage"></div>
          <div class="folderName">Home</div>
        </div>
        <div class="folder empty" style="padding-left: 27px;">
          <div class="folderArrowWrapper">
            <div class="folderArrow"></div>
          </div>
          <div class="folderImage"></div>
          <div class="folderName">Stuff</div>
        </div>
        <div class="folder opened" style="padding-left: 27px;">
          <div class="folderArrowWrapper">
            <div class="folderArrow"></div>
          </div>
          <div class="folderImage"></div>
          <div class="folderName">Things</div>
        </div>
        <div class="folder" style="padding-left: 54px;">
          <div class="folderArrowWrapper">
            <div class="folderArrow"></div>
          </div>
          <div class="folderImage"></div>
          <div class="folderName">Items</div>
        </div>
        <div class="folder" style="padding-left: 27px;">
          <div class="folderArrowWrapper">
            <div class="folderArrow"></div>
          </div>
          <div class="folderImage"></div>
          <div class="folderName">Transformations</div>
        </div>
        <div class="folder" style="padding-left: 27px;">
          <div class="folderArrowWrapper">
            <div class="folderArrow"></div>
          </div>
          <div class="folderImage"></div>
          <div class="folderName">Jobs</div>
        </div>
        <div class="folder public empty">
          <div class="folderArrowWrapper">
            <div class="folderArrow"></div>
          </div>
          <div class="folderImage"></div>
          <div class="folderName">Public</div>
        </div>
      </div>


      <!-- HTML IF HOVER/SELECTED STATE NOT REQUIRED TO SPAN ENTIRE DIV
      <div class="folder first recents empty">
          <div class="dirElement">
              <div class="dirArrow"></div>
              <div class="dirImage"></div>
              <div class="dirName">Recents</div>
          </div>
      </div>
      <div class="folder first home open selected">
          <div class="dirElement">
              <div class="dirArrow"></div>
              <div class="dirImage"></div>
              <div class="dirName">Home</div>
          </div>
          <div class="folders">
              <div class="folder">
                  <div class="dirElement">
                      <div class="dirArrow"></div>
                      <div class="dirImage"></div>
                      <div class="dirName">admin</div>
                  </div>
                  <div class="folders"></div>
              </div>
              <div class="folder">
                  <div class="dirElement">
                      <div class="dirArrow"></div>
                      <div class="dirImage"></div>
                      <div class="dirName">pat</div>
                  </div>
                  <div class="folders"></div>
              </div>
              <div class="folder">
                  <div class="dirElement">
                      <div class="dirArrow"></div>
                      <div class="dirImage"></div>
                      <div class="dirName">suzy</div>
                  </div>
                  <div class="folders"></div>
              </div>
          </div>
      </div>
      <div class="folder first public empty">
          <div class="dirElement">
              <div class="dirArrow"></div>
              <div class="dirImage"></div>
              <div class="dirName">Public</div>
          </div>
          <div class="folders" style="display:none;"></div>
      </div>-->
    </div>

    <div class="fileArea fileList">

      <!-- NO RESULTS FROM SEARCH -->
      <div class="fileAreaMessage" style="display:none;">
        You haven't opened anything recently.
      </div>

      <!-- VIEW OF FILES LIST -->
      <div class="filesAndSearchView">
        <table class="fileTable">
          <thead>
          <tr>
            <th>
              <div class="nameHeader">Name</div>
              <div class="sortWrapper">
                <div class="sort"></div>
              </div>
            </th>
            <th>
              <div>Type</div>
            </th>
            <th>
              <div>Last saved</div>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr title="trans1&#013;Home/Stuff/Folder/transformation 1">
            <td>
              <div class="fileTypeIcon file-trans"></div>
              <div class="fileName">
                transformation1transformation1transformation1transformation1transformation1transformation1transformation1transformation1transformation1transformation1transformation1
              </div>
            </td>
            <td>
              <div class="fileType">
                Transformation
              </div>
            </td>
            <td>
              <div class="fileLastSaved">
                12/28/16 3:50 PM
              </div>
            </td>
          </tr>
          <tr class="" title="job1&#013;Home/Stuff/Folder/transformation 1">
            <td>
              <div class="fileTypeIcon file-job"></div>
              <div class="fileName">
                job1
              </div>
            </td>
            <td>
              <div class="fileType">
                Transformation
              </div>
            </td>
            <td>
              <div class="fileLastSaved">
                12/28/16 3:50 PM
              </div>
            </td>
          </tr>
          <tr class="" title="trans1&#013;Home/Stuff/Folder/folder 1">
            <td>
              <div class="fileTypeIcon file-folder"></div>
              <div class="fileName">
                folder1
              </div>
            </td>
            <td>
              <div class="fileType">
                Folder
              </div>
            </td>
            <td>
              <div class="fileLastSaved">
                12/28/16 3:50 PM
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- VIEW OF SEARCH RESULTS -->
      <div class="searchResultsView" style="display:none;">
        <table class="fileTable searchTable">
          <thead>
          <tr>
            <th>
              <div class="nameHeader">Name</div>
              <div class="sortWrapper">
                <div class="sort"></div>
              </div>
            </th>
            <th>
              <div>Type</div>
            </th>
            <th>
              <div>Last saved</div>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="selected">
            <td>
              <div class="fileTypeIcon file-trans"></div>
              <div class="fileName">
                calls_conversion
              </div>
              <div class="fileLocation" title="full path--use title-on-truncate">
                Home/Folder/transformations/monthly_calls/conversion/calls/conversion/calls
              </div>
            </td>
            <td>
              <div class="fileType">
                <span>Transformation</span>
              </div>
            </td>
            <td>
              <div class="fileLastSaved">
                <span>12/28/16 3:50 PM</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fileTypeIcon file-job"></div>
              <div class="fileName">
                calls_conversion_june
              </div>
              <div class="fileLocation" title="full path--use title-on-truncate">
                Home/Folder/transformations/monthly_calls/conversion/calls/conversion/calls
              </div>
            </td>
            <td>
              <div class="fileType">
                <span>Transformation</span>
              </div>
            </td>
            <td>
              <div class="fileLastSaved">
                <span>12/28/16 3:50 PM</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fileTypeIcon file-folder"></div>
              <div class="fileName">
                calls_conversion
              </div>
              <div class="fileLocation" title="full path--use title-on-truncate">
                Home/Folder/transformations/monthly_calls/conversion/calls/conversion/calls
              </div>
            </td>
            <td>
              <div class="fileType">
                <span>Transformation</span>
              </div>
            </td>
            <td>
              <div class="fileLastSaved">
                <span>12/28/16 3:50 PM</span>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- VIEW OF RECENT FILE CARDS -->
      <div class="recentFileCardsView" style="display: none;">
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="fileNameEntry">
      <div class="fileNameEntryLabel">
        <label for="fileNameEntryTextBox">File name</label>
      </div>
      <input id="fileNameEntryTextBox" type="text" class="fileNameEntryTextBox"/>
    </div>
    <div class="buttons">
      <button class="secondary">Cancel</button>
      <button class="primary">Open</button>
    </div>
  </div>
</div>
</body>
</html>